<template>

  <div class="box-card">
    <el-col :span="4" v-for="item in 10">
      <el-card shadow="hover" :body-style="{ padding: '0px'}">
        <div id="component-a" >
          <div id="component-header">
            <p id="component-content">卡片名称</p>
          </div>
          <div id="component-body">
            <!-- 这里可以添加卡片主体内容 -->
          </div>
        </div>
      </el-card>
    </el-col>

  </div>
</template>

<script>
  export default {
    name: ""
  }
</script>

<style scoped>
  #component-a {
    list-style: none;
    border-radius: 12px;
    border: 1px solid gray;
    background: #fff;
    cursor: pointer;
  }

  #component-header {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    text-align: center;
    height: 25%;
    border-bottom: 1px solid gray;
    background-image: linear-gradient(0deg, #ffc927, #ffa403);
    font-size: 21px;
    color: white;
  }

  #component-content {
    line-height: 37.5px;
  }

  #component-body {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    height: 75%;
    background-color: white;
    color: black;
  }
</style>
